<template>
  <el-tabs v-model="active" type="card" class="demo-router-tabs" @tab-click="tabClick" @tab-remove="removeTab">
    <el-tab-pane v-for="item in keepRouterList" :key="item.path" :label="item.title" :name="item.path"
      :closable="keepRouterList.length != 1">
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts" name="">
import type { TabsPaneContext, TabPanelName } from "element-plus";
import { useRoutingTagStore, useMenuStore } from "/@/store/index";
import { useRouter } from "vue-router";
const router = useRouter();
// 获取当前路由tabs 数据
const keepRouterList = useRoutingTagStore().routerList;
const active = ref('')
watch(() => useRoutingTagStore().active, (val) => {
  active.value = val.path
}, { deep: true, immediate: true })
// 路由tabs点击事件
const tabClick = (pane: TabsPaneContext) => {
  if (pane.props.name != active.value) {
    useRoutingTagStore().updatedRouter(pane.props.name as string);
    router.push(pane.props.name as string);
  }
};
// 关闭路由tabs 事件
const removeTab = (targetName: TabPanelName) => {
  const name = targetName as string;
  useRoutingTagStore().removeRouterPath(name);
  active.value = keepRouterList.filter((items) => items.active)[0].path;
  router.push(active.value);
  // active.value=paths[paths.length - 1];
};
</script>

<style scoped lang="less">

</style>